<!--
 * @Descripttion: 标准化商品库
 * @version:
 * @Author: 张文韬
 * @Date: 2020-10-14 10:00:17
 * @LastEditors: 张文韬
 * @LastEditTime: 2020-10-14 10:00:21
-->
<template>
    <el-card class="box-card">
        <div class="search">
          <el-row type="flex" justify="space-between" align="middle">
              <el-date-picker
                v-model="searchDate"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd">
              </el-date-picker>
			  <div style="font-size: 18px;font-weight: bold;">累计成交量:{{sumPrice}}万元,累计订单数:{{count}}笔</div>
              <el-row>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
                <el-button icon="el-icon-refresh-right" @click="handleReset">重置</el-button>
              </el-row>
          </el-row>
        </div>
        <el-row>
          <el-col :span="12" v-for="(item, index) in pieDatas" :key="index" style="position: relative;">
			  <p style="font-weight: bold;font-size: 18px; position: absolute;right: 0px;top: 62px;">合计:{{item.total}}</p>
            <e-pie :seriesData="item.pieData"
				   :total = "item.total"
                   :ref="`cPieRef_${index}`"
                   :text="item.title"
                   :subText="item.subTitle"></e-pie>
          </el-col>
        </el-row>
    </el-card>
</template>

<script>
import { Epie } from '@/components/e-charts'
import {queryEshopDealList} from '@/api/admin.api'

	import {
		getSumPriceAndCount
	} from '@/api/mall.api.js'

export default {
  name: 'statistical-dashboard',
  components: {
    'e-pie': Epie,
  },
  data () {
    return {
      searchDate: [],
      beginTime: '',
      endTime:'',
      pieDatas: [
        {
          title: '电商成交量占比',
          subTitle: '',
		  total:'',
          pieData: [
            // { value: 335, name: '新建' },
            // { value: 310, name: '提交' },
            // { value: 274, name: '退回' },
            // { value: 235, name: '已处理' },
            // { value: 400, name: '已立项' },
            // { value: 0, name: '委托撤销采购' }
          ]
        },
        {
          title: '电商利润占比',
          subTitle: '',
		  total:'',
          pieData: [
            // { value: 335, name: '直接访问' },
            // { value: 310, name: '邮件营销' },
            // { value: 274, name: '联盟广告' },
            // { value: 235, name: '视频广告' },
            // { value: 400, name: '搜索引擎' }
          ]
        }
      ]
    }
  },
  created () { },
  mounted () {
    this.$nextTick(()=>{
      this.handleSearch();
	  this.getNum();
    })
  },
  methods: {
	  getNum(){
	  	var that = this;
	  	getSumPriceAndCount().then((res)=>{
	  		that.count = res.count;
	  		that.sumPrice = (res.sumPrice/10000).toFixed(2);
	  	})
	  },
    // 获取查询时间
    searchFormData() {
      const {searchDate} = this;
      const beginTime = searchDate && searchDate.length > 0 ? searchDate[0] : '';
      const endTime =  searchDate && searchDate.length > 0 ? searchDate[1] : '';
      console.log({beginTime,endTime})
      return {beginTime,endTime}
    },
    /**
    * @functionName handleSearch
    * @desccription 查询
    * @author 穆宏宇
    * @date 2021-04-28 10:57:21
    * @version v1.0.0
    */
    handleSearch() {
		var that = this;
      const {pieDatas} = this;
      const searchobj = { ...this.searchFormData(), pageNum: 1, pageSize: 10 }
      queryEshopDealList(searchobj).then(res => {
        const records = res.records
		var total = 0;
        pieDatas.forEach((v,i)=>{
          let pieData = []
          records.forEach(item=>{
            pieData.push({name:item.eshopName, value: i === 0 ? item.dealOrderNum : item.profit})
			if(i == 0){
				total += item.dealOrderNum
			}else{
				total += item.profit
			}
          })
		  v.total = total.toFixed(2);	
          this.$set(pieDatas[i], 'pieData', pieData)
        })
		console.log(pieDatas);
        pieDatas.forEach((item,index)=>{
          const ref =`cPieRef_${index}`;
          this.$refs[ref][0].mergeOptions(item.pieData);
        })
      })
	  
      // const d = [
      //   { value: 335, name: '新建' },
      //   { value: 310, name: '提交' },
      //   { value: 274, name: '退回' },
      //   { value: 235, name: '已处理' },
      //   { value: 400, name: '已立项' },
      //   { value: 600, name: '委托撤销采购' }
      // ]
      // this.$set(pieDatas[0], 'pieData', d)
      // pieDatas.forEach((item,index)=>{
      //   const ref =`cPieRef_${index}`;
      //   this.$refs[ref][0].mergeOptions(item.pieData);
      // })
    },
    /**
     * @functionName handleReset
     * @desccription 重置搜索
     * @author 穆宏宇
     * @date 2021-04-28 10:51:11
     * @version v1.0.0
     */
    handleReset () {
      this.searchDate = [];
    }
  }
}
</script>

<style scoped>
.search {
  /*margin-bottom: 20px;*/
}
</style>
